<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>PWA 插件 | VuePress</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/logo.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <script data-ad-client="ca-pub-2245427233262012" async="true"
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <meta name="description" content="愿半生编码，如一生好友。">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">

    <link rel="preload" href="/assets/css/0.styles.fca152ce.css" as="style">
    <link rel="preload" href="/assets/js/app.28715422.js" as="script">
    <link rel="preload" href="/assets/js/5.cdfc0b9f.js" as="script">
    <link rel="preload" href="/assets/js/55.b2e1b9f2.js" as="script">
    <link rel="preload" href="/assets/js/9.4c44b987.js" as="script">
    <link rel="prefetch" href="/assets/js/10.84acbb53.js">
    <link rel="prefetch" href="/assets/js/11.702efeb3.js">
    <link rel="prefetch" href="/assets/js/12.589fb250.js">
    <link rel="prefetch" href="/assets/js/13.5b7e8614.js">
    <link rel="prefetch" href="/assets/js/14.a954bfd1.js">
    <link rel="prefetch" href="/assets/js/15.bd11c63a.js">
    <link rel="prefetch" href="/assets/js/16.b4fb7988.js">
    <link rel="prefetch" href="/assets/js/17.61d84266.js">
    <link rel="prefetch" href="/assets/js/18.24a2bff9.js">
    <link rel="prefetch" href="/assets/js/19.43d31d8f.js">
    <link rel="prefetch" href="/assets/js/20.b22f54d0.js">
    <link rel="prefetch" href="/assets/js/21.9c07bc91.js">
    <link rel="prefetch" href="/assets/js/22.32e1eb60.js">
    <link rel="prefetch" href="/assets/js/23.093427d3.js">
    <link rel="prefetch" href="/assets/js/24.e648d309.js">
    <link rel="prefetch" href="/assets/js/25.d7282ca4.js">
    <link rel="prefetch" href="/assets/js/26.35acf93d.js">
    <link rel="prefetch" href="/assets/js/27.56ca4ce1.js">
    <link rel="prefetch" href="/assets/js/28.93379c82.js">
    <link rel="prefetch" href="/assets/js/29.51d63262.js">
    <link rel="prefetch" href="/assets/js/30.1b336946.js">
    <link rel="prefetch" href="/assets/js/31.e297de45.js">
    <link rel="prefetch" href="/assets/js/32.4bae9555.js">
    <link rel="prefetch" href="/assets/js/33.4239fd2e.js">
    <link rel="prefetch" href="/assets/js/34.bbc16b3c.js">
    <link rel="prefetch" href="/assets/js/35.f16977ac.js">
    <link rel="prefetch" href="/assets/js/36.6141cdc8.js">
    <link rel="prefetch" href="/assets/js/37.43f5a7f6.js">
    <link rel="prefetch" href="/assets/js/38.01c53507.js">
    <link rel="prefetch" href="/assets/js/39.21f63708.js">
    <link rel="prefetch" href="/assets/js/40.f9f38954.js">
    <link rel="prefetch" href="/assets/js/41.0175e1f4.js">
    <link rel="prefetch" href="/assets/js/42.422cba18.js">
    <link rel="prefetch" href="/assets/js/43.3d77a131.js">
    <link rel="prefetch" href="/assets/js/44.aab84de2.js">
    <link rel="prefetch" href="/assets/js/45.ac7ca1c5.js">
    <link rel="prefetch" href="/assets/js/46.9982952d.js">
    <link rel="prefetch" href="/assets/js/47.d4c85adf.js">
    <link rel="prefetch" href="/assets/js/48.d00a7fe9.js">
    <link rel="prefetch" href="/assets/js/49.03487062.js">
    <link rel="prefetch" href="/assets/js/50.bbfd00cd.js">
    <link rel="prefetch" href="/assets/js/51.1ef38ba0.js">
    <link rel="prefetch" href="/assets/js/52.f352c22a.js">
    <link rel="prefetch" href="/assets/js/53.fa377a7b.js">
    <link rel="prefetch" href="/assets/js/54.16d81c63.js">
    <link rel="prefetch" href="/assets/js/56.99f69695.js">
    <link rel="prefetch" href="/assets/js/57.54be906e.js">
    <link rel="prefetch" href="/assets/js/58.e28944e4.js">
    <link rel="prefetch" href="/assets/js/59.647fcd7b.js">
    <link rel="prefetch" href="/assets/js/6.8f67e34e.js">
    <link rel="prefetch" href="/assets/js/60.ed875cf2.js">
    <link rel="prefetch" href="/assets/js/61.d244e754.js">
    <link rel="prefetch" href="/assets/js/62.82572383.js">
    <link rel="prefetch" href="/assets/js/63.afac6e14.js">
    <link rel="prefetch" href="/assets/js/64.1793ed0c.js">
    <link rel="prefetch" href="/assets/js/65.75847d31.js">
    <link rel="prefetch" href="/assets/js/66.a613f673.js">
    <link rel="prefetch" href="/assets/js/67.374e7e54.js">
    <link rel="prefetch" href="/assets/js/7.2df5fd3a.js">
    <link rel="prefetch" href="/assets/js/8.79c44677.js">
    <link rel="prefetch" href="/assets/js/vendors~docsearch.b3708bf9.js">
    <link rel="prefetch" href="/assets/js/vendors~flowchart.3b4fa92d.js">
    <link rel="prefetch" href="/assets/js/vendors~notification.11c6c6d5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.fca152ce.css">
</head>
<body>
<div id="app" data-server-rendered="true">
    <div class="theme-container">
        <header class="navbar">
            <div class="sidebar-button">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"
                     class="icon">
                    <path fill="currentColor"
                          d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path>
                </svg>
            </div>
            <a href="/" class="home-link router-link-active"><!----> <span class="site-name">赵小云学习笔记</span></a>
            <div class="links">
                <form id="search-form" role="search" class="algolia-search-wrapper search-box"><input
                        id="algolia-search-input" class="search-query"></form>
                <nav class="nav-links can-hide">
                    <div class="nav-item"><a href="/notes/" class="nav-link">
                        notes
                    </a></div>
                    <div class="nav-item"><a href="/guide/" class="nav-link">
                        指南
                    </a></div>
                    <div class="nav-item"><a href="/config/" class="nav-link">
                        配置
                    </a></div>
                    <div class="nav-item"><a href="/plugin/" class="nav-link router-link-active">
                        插件
                    </a></div>
                    <div class="nav-item"><a href="/theme/" class="nav-link">
                        主题
                    </a></div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper">
                            <button type="button" aria-label="了解更多" class="dropdown-title"><span
                                    class="title">了解更多</span> <span class="arrow down"></span></button>
                            <button type="button" aria-label="了解更多" class="mobile-dropdown-title"><span class="title">了解更多</span>
                                <span class="arrow right"></span></button>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item"><h4>
                                    API
                                </h4>
                                    <ul class="dropdown-subitem-wrapper">
                                        <li class="dropdown-subitem"><a href="/zh/api/cli.html" class="nav-link">
                                            CLI
                                        </a></li>
                                        <li class="dropdown-subitem"><a href="/zh/api/node.html" class="nav-link">
                                            Node
                                        </a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-item"><h4>
                                    开发指南
                                </h4>
                                    <ul class="dropdown-subitem-wrapper">
                                        <li class="dropdown-subitem"><a href="/zh/miscellaneous/local-development.html"
                                                                        class="nav-link">
                                            本地开发
                                        </a></li>
                                        <li class="dropdown-subitem"><a href="/zh/miscellaneous/design-concepts.html"
                                                                        class="nav-link">
                                            设计理念
                                        </a></li>
                                        <li class="dropdown-subitem"><a href="/zh/faq/" class="nav-link">
                                            FAQ
                                        </a></li>
                                        <li class="dropdown-subitem"><a href="/zh/miscellaneous/glossary.html"
                                                                        class="nav-link">
                                            术语
                                        </a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-item"><h4>
                                    其他
                                </h4>
                                    <ul class="dropdown-subitem-wrapper">
                                        <li class="dropdown-subitem"><a href="/zh/miscellaneous/migration-guide.html"
                                                                        class="nav-link">
                                            从 0.x 迁移
                                        </a></li>
                                        <li class="dropdown-subitem"><a
                                                href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md"
                                                target="_blank" rel="noopener noreferrer" class="nav-link external">
                                            Changelog
                                            <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                       focusable="false" x="0px" y="0px" viewBox="0 0 100 100"
                                                       width="15" height="15" class="icon outbound"><path
                                                    fill="currentColor"
                                                    d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                                                    fill="currentColor"
                                                    points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                                                    class="sr-only">(opens new window)</span></span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank"
                                             rel="noopener noreferrer" class="nav-link external">
                        0.x
                        <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                   y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                                class="sr-only">(opens new window)</span></span></a></div>
                    <a href="https://github.com/vuejs/vuepress" target="_blank" rel="noopener noreferrer"
                       class="repo-link">
                        GitHub
                        <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px"
                                   y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                                class="sr-only">(opens new window)</span></span></a></nav>
            </div>
        </header>
        <div class="sidebar-mask"></div>
        <aside class="sidebar">
            <nav class="nav-links">
                <div class="nav-item"><a href="/notes/" class="nav-link">
                    notes
                </a></div>
                <div class="nav-item"><a href="/guide/" class="nav-link">
                    指南
                </a></div>
                <div class="nav-item"><a href="/config/" class="nav-link">
                    配置
                </a></div>
                <div class="nav-item"><a href="/plugin/" class="nav-link router-link-active">
                    插件
                </a></div>
                <div class="nav-item"><a href="/theme/" class="nav-link">
                    主题
                </a></div>
                <div class="nav-item">
                    <div class="dropdown-wrapper">
                        <button type="button" aria-label="了解更多" class="dropdown-title"><span class="title">了解更多</span>
                            <span class="arrow down"></span></button>
                        <button type="button" aria-label="了解更多" class="mobile-dropdown-title"><span
                                class="title">了解更多</span> <span class="arrow right"></span></button>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item"><h4>
                                API
                            </h4>
                                <ul class="dropdown-subitem-wrapper">
                                    <li class="dropdown-subitem"><a href="/zh/api/cli.html" class="nav-link">
                                        CLI
                                    </a></li>
                                    <li class="dropdown-subitem"><a href="/zh/api/node.html" class="nav-link">
                                        Node
                                    </a></li>
                                </ul>
                            </li>
                            <li class="dropdown-item"><h4>
                                开发指南
                            </h4>
                                <ul class="dropdown-subitem-wrapper">
                                    <li class="dropdown-subitem"><a href="/zh/miscellaneous/local-development.html"
                                                                    class="nav-link">
                                        本地开发
                                    </a></li>
                                    <li class="dropdown-subitem"><a href="/zh/miscellaneous/design-concepts.html"
                                                                    class="nav-link">
                                        设计理念
                                    </a></li>
                                    <li class="dropdown-subitem"><a href="/zh/faq/" class="nav-link">
                                        FAQ
                                    </a></li>
                                    <li class="dropdown-subitem"><a href="/zh/miscellaneous/glossary.html"
                                                                    class="nav-link">
                                        术语
                                    </a></li>
                                </ul>
                            </li>
                            <li class="dropdown-item"><h4>
                                其他
                            </h4>
                                <ul class="dropdown-subitem-wrapper">
                                    <li class="dropdown-subitem"><a href="/zh/miscellaneous/migration-guide.html"
                                                                    class="nav-link">
                                        从 0.x 迁移
                                    </a></li>
                                    <li class="dropdown-subitem"><a
                                            href="https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md"
                                            target="_blank" rel="noopener noreferrer" class="nav-link external">
                                        Changelog
                                        <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                   focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15"
                                                   height="15" class="icon outbound"><path fill="currentColor"
                                                                                           d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                                                fill="currentColor"
                                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                                                class="sr-only">(opens new window)</span></span></a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item"><a href="https://v0.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer"
                                         class="nav-link external">
                    0.x
                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                               viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path
                            fill="currentColor"
                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                            fill="currentColor"
                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                            class="sr-only">(opens new window)</span></span></a></div>
                <a href="https://github.com/vuejs/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
                    GitHub
                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                               viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path
                            fill="currentColor"
                            d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                            fill="currentColor"
                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                            class="sr-only">(opens new window)</span></span></a></nav>
            <ul class="sidebar-links">
                <li>
                    <section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件</span> <!----></p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/plugin/" aria-current="page" class="sidebar-link">介绍</a></li>
                            <li><a href="/plugin/using-a-plugin.html" class="sidebar-link">使用插件</a></li>
                            <li><a href="/plugin/writing-a-plugin.html" class="sidebar-link">开发插件</a></li>
                            <li><a href="/plugin/life-cycle.html" class="sidebar-link">生命周期</a></li>
                            <li><a href="/plugin/option-api.html" class="sidebar-link">Option API</a></li>
                            <li><a href="/plugin/context-api.html" class="sidebar-link">Context API</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>官方插件</span> <!----></p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/plugin/official/plugin-active-header-links.html" class="sidebar-link">active-header-links</a>
                            </li>
                            <li><a href="/plugin/official/plugin-back-to-top.html" class="sidebar-link">back-to-top</a>
                            </li>
                            <li><a href="/plugin/official/plugin-blog.html" class="sidebar-link">blog</a></li>
                            <li><a href="/plugin/official/plugin-google-analytics.html" class="sidebar-link">google-analytics</a>
                            </li>
                            <li><a href="/plugin/official/plugin-last-updated.html"
                                   class="sidebar-link">last-updated</a></li>
                            <li><a href="/plugin/official/plugin-medium-zoom.html" class="sidebar-link">medium-zoom</a>
                            </li>
                            <li><a href="/plugin/official/plugin-nprogress.html" class="sidebar-link">nprogress</a></li>
                            <li><a href="/plugin/official/plugin-pwa.html" aria-current="page"
                                   class="active sidebar-link">pwa</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header"><a href="/plugin/official/plugin-pwa.html#安装"
                                                                      class="sidebar-link">安装</a></li>
                                    <li class="sidebar-sub-header"><a href="/plugin/official/plugin-pwa.html#使用"
                                                                      class="sidebar-link">使用</a></li>
                                    <li class="sidebar-sub-header"><a href="/plugin/official/plugin-pwa.html#选项"
                                                                      class="sidebar-link">选项</a></li>
                                    <li class="sidebar-sub-header"><a href="/plugin/official/plugin-pwa.html#从-0-x-迁移"
                                                                      class="sidebar-link">从 0.x 迁移</a></li>
                                    <li class="sidebar-sub-header"><a
                                            href="/plugin/official/plugin-pwa.html#自定义-sw-update-popup-的-ui"
                                            class="sidebar-link">自定义 SW-Update Popup 的 UI</a></li>
                                </ul>
                            </li>
                            <li><a href="/plugin/official/plugin-register-components.html" class="sidebar-link">register-components</a>
                            </li>
                            <li><a href="/plugin/official/plugin-search.html" class="sidebar-link">search</a></li>
                        </ul>
                    </section>
                </li>
            </ul>
        </aside>
        <main class="page">
            <div class="theme-default-content content__default">
                <h1 id="vuepress-plugin-pwa"><a href="#vuepress-plugin-pwa" class="header-anchor">#</a> <a
                        href="https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-pwa"
                        target="_blank" rel="noopener noreferrer">@vuepress/plugin-pwa<span><svg
                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                        viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor"
                                                                                                 d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                        class="sr-only">(opens new window)</span></span></a></h1>
                <blockquote><p>PWA 插件</p></blockquote>
                <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2>
                <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span
                        class="token function">add</span> -D @vuepress/plugin-pwa
<span class="token comment"># OR npm install -D @vuepress/plugin-pwa</span>
</code></pre>
                </div>
                <h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2>
                <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span
                        class="token punctuation">.</span>exports <span class="token operator">=</span> <span
                        class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@vuepress/pwa'</span><span
                            class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
                </div>
                <div class="custom-block tip"><p class="custom-block-title">TIP</p>
                    <p>为了让你的网站完全地兼容 PWA，你需要:</p>
                    <ul>
                        <li>在 <code>.vuepress/public</code> 提供 Manifest 和 icons</li>
                        <li>在 <code>.vuepress/config.js</code> 添加正確的 <a href="/config/#head">head links</a>(参见下面例子).
                        </li>
                    </ul>
                    <p>更多细节，请参见 <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank"
                                   rel="noopener noreferrer">MDN docs about the Web App Manifest<span><svg
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                            viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor"
                                                                                                     d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                            fill="currentColor"
                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                            class="sr-only">(opens new window)</span></span></a>.
                    </p>
                </div>
                <p>这是一个在VuePress中完全地兼容 PWA 的例子：</p>
                <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span
                        class="token punctuation">.</span>exports <span class="token operator">=</span> <span
                        class="token punctuation">{</span>
  head<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span
                            class="token operator">:</span> <span class="token string">'icon'</span><span
                            class="token punctuation">,</span> href<span class="token operator">:</span> <span
                            class="token string">'/logo.png'</span> <span class="token punctuation">}</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span
                            class="token operator">:</span> <span class="token string">'manifest'</span><span
                            class="token punctuation">,</span> href<span class="token operator">:</span> <span
                            class="token string">'/manifest.json'</span> <span class="token punctuation">}</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'meta'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> name<span
                            class="token operator">:</span> <span class="token string">'theme-color'</span><span
                            class="token punctuation">,</span> content<span class="token operator">:</span> <span
                            class="token string">'#3eaf7c'</span> <span class="token punctuation">}</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'meta'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> name<span
                            class="token operator">:</span> <span
                            class="token string">'apple-mobile-web-app-capable'</span><span
                            class="token punctuation">,</span> content<span class="token operator">:</span> <span
                            class="token string">'yes'</span> <span class="token punctuation">}</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'meta'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> name<span
                            class="token operator">:</span> <span class="token string">'apple-mobile-web-app-status-bar-style'</span><span
                            class="token punctuation">,</span> content<span class="token operator">:</span> <span
                            class="token string">'black'</span> <span class="token punctuation">}</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span
                            class="token operator">:</span> <span class="token string">'apple-touch-icon'</span><span
                            class="token punctuation">,</span> href<span class="token operator">:</span> <span
                            class="token string">'/icons/apple-touch-icon-152x152.png'</span> <span
                            class="token punctuation">}</span><span class="token punctuation">]</span><span
                            class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span
                            class="token operator">:</span> <span class="token string">'mask-icon'</span><span
                            class="token punctuation">,</span> href<span class="token operator">:</span> <span
                            class="token string">'/icons/safari-pinned-tab.svg'</span><span
                            class="token punctuation">,</span> color<span class="token operator">:</span> <span
                            class="token string">'#3eaf7c'</span> <span class="token punctuation">}</span><span
                            class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'meta'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> name<span
                            class="token operator">:</span> <span
                            class="token string">'msapplication-TileImage'</span><span
                            class="token punctuation">,</span> content<span class="token operator">:</span> <span
                            class="token string">'/icons/msapplication-icon-144x144.png'</span> <span
                            class="token punctuation">}</span><span class="token punctuation">]</span><span
                            class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'meta'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span> name<span
                            class="token operator">:</span> <span
                            class="token string">'msapplication-TileColor'</span><span
                            class="token punctuation">,</span> content<span class="token operator">:</span> <span
                            class="token string">'#000000'</span> <span class="token punctuation">}</span><span
                            class="token punctuation">]</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@vuepress/pwa'</span><span
                            class="token punctuation">,</span> <span class="token punctuation">{</span>
      serviceWorker<span class="token operator">:</span> <span class="token boolean">true</span><span
                            class="token punctuation">,</span>
      updatePopup<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span
                            class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre>
                </div>
                <h2 id="选项"><a href="#选项" class="header-anchor">#</a> 选项</h2>
                <h3 id="serviceworker"><a href="#serviceworker" class="header-anchor">#</a> serviceWorker</h3>
                <ul>
                    <li>类型: <code>boolean</code></li>
                    <li>默认值: <code>true</code></li>
                </ul>
                <p>如果设置为 <code>true</code>，VuePress 将自动生成并注册一个 <a
                        href="https://developers.google.com/web/fundamentals/primers/service-workers/" target="_blank"
                        rel="noopener noreferrer">Service Worker<span><svg xmlns="http://www.w3.org/2000/svg"
                                                                           aria-hidden="true" focusable="false" x="0px"
                                                                           y="0px" viewBox="0 0 100 100" width="15"
                                                                           height="15" class="icon outbound"><path
                        fill="currentColor"
                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                        class="sr-only">(opens new window)</span></span></a>，用于缓存页面的内容以供离线使用（仅会在生产环境中启用）。
                </p>
                <p>有一个别名化的模块 <code>@sw-event</code> 模块将会 emit 以下事件：</p>
                <ul>
                    <li><code>sw-ready</code></li>
                    <li><code>sw-cached</code></li>
                    <li><code>sw-updated</code></li>
                    <li><code>sw-offline</code></li>
                    <li><code>sw-error</code></li>
                </ul>
                <div class="custom-block tip"><p class="custom-block-title">TIP</p>
                    <p>只有在你能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册。</p></div>
                <h3 id="generateswconfig"><a href="#generateswconfig" class="header-anchor">#</a> generateSWConfig</h3>
                <ul>
                    <li>类型: <code>object</code></li>
                    <li>默认值: <code>{}</code></li>
                </ul>
                <p>workbox-build 的 <a
                        href="https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config"
                        target="_blank" rel="noopener noreferrer">generateSW config<span><svg
                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                        viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor"
                                                                                                 d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                        class="sr-only">(opens new window)</span></span></a>。
                </p>
                <h3 id="updatepopup"><a href="#updatepopup" class="header-anchor">#</a> updatePopup</h3>
                <ul>
                    <li>类型: <code>boolean|popupConfig</code></li>
                    <li>默认值: <code>undefined</code></li>
                </ul>
                <p>类型 <code>popupConfig</code> 的定义如下：</p>
                <div class="language-typescript extra-class"><pre class="language-typescript"><code><span
                        class="token keyword">interface</span> <span
                        class="token class-name">normalPopupConfig</span> <span class="token punctuation">{</span>
  message<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span
                            class="token comment">// defaults to 'New content is available.'</span>
  buttonText<span class="token operator">:</span> <span class="token builtin">string</span><span
                            class="token punctuation">;</span> <span
                            class="token comment">// defaults to 'Refresh'</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">localedPopupConfig</span> <span
                            class="token punctuation">{</span>
  <span class="token punctuation">[</span>localePath<span class="token operator">:</span> <span class="token builtin">string</span><span
                            class="token punctuation">]</span><span class="token operator">:</span> normalPopupConfig
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">popupConfig</span> <span
                            class="token operator">=</span> normalPopupConfig <span class="token operator">|</span> localedPopupConfig
</code></pre>
                </div>
                <p>本选项开启了一个用于刷新内容的弹窗。这个弹窗将会在站点有内容更新时显示出来，并提供了一个 <code>refresh</code> 按钮，允许用户立即刷新内容。</p>
                <blockquote>
                    <p>如果没有“刷新”按钮，则只有在所有的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Clients"
                                             target="_blank" rel="noopener noreferrer">Clients<span><svg
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                            viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor"
                                                                                                     d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                            fill="currentColor"
                            points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                            class="sr-only">(opens new window)</span></span></a> 被关闭后，新的 Service Worker
                        才会处于活动状态。这意味着用户在关闭你网站的所有标签之前无法看到新内容。但是 <code>refresh</code> 按钮会立即激活新的 Service Worker。
                    </p>
                </blockquote>
                <h3 id="popupcomponent"><a href="#popupcomponent" class="header-anchor">#</a> popupComponent</h3>
                <ul>
                    <li>类型: <code>string</code></li>
                    <li>默认值: <code>undefined</code></li>
                </ul>
                <p>用于替换默认弹出组件的自定义组件。</p>
                <p><strong>参考:</strong></p>
                <ul>
                    <li><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89-sw-update-popup-%E7%9A%84-ui">自定义 SW-Update Popup</a></li>
                </ul>
                <h2 id="从-0-x-迁移"><a href="#从-0-x-迁移" class="header-anchor">#</a> 从 0.x 迁移</h2>
                <h3 id="service-worker"><a href="#service-worker" class="header-anchor">#</a> Service Worker</h3>
                <div class="language-diff extra-class"><pre class="language-diff"><code>module.exports = {
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> serviceWorker: true,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span
                            class="token line"> plugins: ['@vuepress/pwa']
</span></span>}
</code></pre>
                </div>
                <h3 id="sw-update-popup"><a href="#sw-update-popup" class="header-anchor">#</a> SW-Update Popup</h3>
                <div class="language-diff extra-class"><pre class="language-diff"><code>module.exports = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> themeConfig: {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span
                            class="token line">   serviceWorker: {
</span><span class="token prefix deleted">-</span><span class="token line">     updatePopup: {
</span><span class="token prefix deleted">-</span><span class="token line">        message: &quot;New content is available.&quot;,
</span><span class="token prefix deleted">-</span><span class="token line">        buttonText: &quot;Refresh&quot;
</span><span class="token prefix deleted">-</span><span class="token line">     }
</span><span class="token prefix deleted">-</span><span class="token line">   }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span
                            class="token line">  plugins: {
</span><span class="token prefix inserted">+</span><span class="token line">   '@vuepress/pwa': {
</span><span class="token prefix inserted">+</span><span class="token line">      serviceWorker: true,
</span><span class="token prefix inserted">+</span><span class="token line">      updatePopup: {
</span><span class="token prefix inserted">+</span><span class="token line">        message: &quot;New content is available.&quot;,
</span><span class="token prefix inserted">+</span><span class="token line">        buttonText: &quot;Refresh&quot;
</span><span class="token prefix inserted">+</span><span class="token line">      }
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span><span class="token prefix inserted">+</span><span class="token line"> }
</span></span>}
</code></pre>
                </div>
                <p>如果你在 <a href="/guide/i18n.html">i18n</a> 模式下:</p>
                <div class="language-diff extra-class"><pre class="language-diff"><code>module.exports = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> themeConfig: {
</span><span class="token prefix unchanged"> </span><span class="token line">   '/': {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span
                            class="token line">     serviceWorker: {
</span><span class="token prefix deleted">-</span><span class="token line">       updatePopup: {
</span><span class="token prefix deleted">-</span><span class="token line">         message: &quot;New content is available.&quot;,
</span><span class="token prefix deleted">-</span><span class="token line">         buttonText: &quot;Refresh&quot;
</span><span class="token prefix deleted">-</span><span class="token line">       }
</span><span class="token prefix deleted">-</span><span class="token line">     }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   },
</span><span class="token prefix unchanged"> </span><span class="token line">   '/zh/': {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span
                            class="token line">     serviceWorker: {
</span><span class="token prefix deleted">-</span><span class="token line">       updatePopup: {
</span><span class="token prefix deleted">-</span><span class="token line">         message: &quot;发现新内容可用&quot;,
</span><span class="token prefix deleted">-</span><span class="token line">         buttonText: &quot;刷新&quot;
</span><span class="token prefix deleted">-</span><span class="token line">       }
</span><span class="token prefix deleted">-</span><span class="token line">     }
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }
</span><span class="token prefix unchanged"> </span><span class="token line"> },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span
                            class="token line">  plugins: {
</span><span class="token prefix inserted">+</span><span class="token line">    '@vuepress/pwa': {
</span><span class="token prefix inserted">+</span><span class="token line">      serviceWorker: true,
</span><span class="token prefix inserted">+</span><span class="token line">      updatePopup: {
</span><span class="token prefix inserted">+</span><span class="token line">        '/': {
</span><span class="token prefix inserted">+</span><span class="token line">          message: &quot;New content is available.&quot;,
</span><span class="token prefix inserted">+</span><span class="token line">          buttonText: &quot;Refresh&quot;
</span><span class="token prefix inserted">+</span><span class="token line">        },
</span><span class="token prefix inserted">+</span><span class="token line">        '/zh/': {
</span><span class="token prefix inserted">+</span><span class="token line">          message: &quot;发现新内容可用&quot;,
</span><span class="token prefix inserted">+</span><span class="token line">          buttonText: &quot;刷新&quot;
</span><span class="token prefix inserted">+</span><span class="token line">        }
</span><span class="token prefix inserted">+</span><span class="token line">      }
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span><span class="token prefix inserted">+</span><span class="token line">  }
</span></span></code></pre>
                </div>
                <p>值得一提的是本插件已经内置了上述的 i18n 配置，所以如果你想直接使用默认的 i18n，你可以将上面的配置缩写为：</p>
                <div class="language-js extra-class"><pre class="language-js"><code>module<span
                        class="token punctuation">.</span>exports <span class="token operator">=</span> <span
                        class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">'@vuepress/pwa'</span><span class="token operator">:</span> <span
                            class="token punctuation">{</span>
      serviceWorker<span class="token operator">:</span> <span class="token boolean">true</span><span
                            class="token punctuation">,</span>
      updatePopup<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
                </div>
                <p>欢迎提交 PR 以增加默认的 <a
                        href="https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/plugin-pwa/lib/i18n.js"
                        target="_blank" rel="noopener noreferrer">i18n 配置<span><svg xmlns="http://www.w3.org/2000/svg"
                                                                                    aria-hidden="true" focusable="false"
                                                                                    x="0px" y="0px"
                                                                                    viewBox="0 0 100 100" width="15"
                                                                                    height="15" class="icon outbound"><path
                        fill="currentColor"
                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                        class="sr-only">(opens new window)</span></span></a>.
                </p>
                <h2 id="自定义-sw-update-popup-的-ui"><a href="#自定义-sw-update-popup-的-ui" class="header-anchor">#</a> 自定义
                    SW-Update Popup 的 UI</h2>
                <p>默认的 SW-Update Popup 组件提供了一个默认插槽，使您能够完全控制弹窗的外观。</p>
                <p>首先，您需要在 <code>.vuepress/components</code> 中创建一个全局组件（例如<code>MySWUpdatePopup</code>)。
                    一个基于默认组件创建的简单组件如下：</p>
                <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span
                        class="token tag"><span class="token punctuation">&lt;</span>template</span><span
                        class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SWUpdatePopup</span> <span
          class="token attr-name">v-slot</span><span class="token attr-value"><span
          class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ enabled, reload, message, buttonText }<span
          class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
      <span class="token attr-name">v-if</span><span class="token attr-value"><span
                class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>enabled<span
                class="token punctuation">&quot;</span></span>
      <span class="token attr-name">class</span><span class="token attr-value"><span
                class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-sw-update-popup<span
                class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      {{ message }}<span class="token tag"><span class="token tag"><span
                            class="token punctuation">&lt;</span>br</span><span
                            class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span
              class="token attr-name">@click</span><span class="token attr-value"><span
              class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reload<span
              class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ buttonText }}<span
                            class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span
                            class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span
            class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SWUpdatePopup</span><span
          class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span
        class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span
        class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> SWUpdatePopup <span class="token keyword">from</span> <span
                            class="token string">'@vuepress/plugin-pwa/lib/SWUpdatePopup.vue'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span
                            class="token punctuation">{</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span> SWUpdatePopup <span
                            class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span
                            class="token punctuation">&lt;/</span>script</span><span
                            class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span
        class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.my-sw-update-popup</span> <span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> right<span
                            class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span
                            class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 20px<span
                            class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span
                            class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span
                            class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span
                            class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 5px solid #3eaf7c<span
                            class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.my-sw-update-popup button</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #fefefe<span
                            class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span
                            class="token punctuation">&lt;/</span>style</span><span
                            class="token punctuation">&gt;</span></span>
</code></pre>
                </div>
                <p>接着，更新你的插件配置：</p>
                <div class="language-diff extra-class"><pre class="language-diff"><code>module.exports = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  plugins: {
</span><span class="token prefix unchanged"> </span><span class="token line">   '@vuepress/pwa': {
</span><span class="token prefix unchanged"> </span><span class="token line">      serviceWorker: true,
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span
                            class="token line">      popupComponent: 'MySWUpdatePopup',
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      updatePopup: true
</span><span class="token prefix unchanged"> </span><span class="token line">    }
</span><span class="token prefix unchanged"> </span><span class="token line"> }
</span></span>}
</code></pre>
                </div>
                <p><strong>参考:</strong></p>
                <ul>
                    <li><a href="/guide/using-vue.html#使用组件">VuePress &gt; 使用组件</a></li>
                    <li>
                        <a href="https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"
                           target="_blank" rel="noopener noreferrer">Vue &gt; 作用域插槽<span><svg
                                xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                                viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                                class="sr-only">(opens new window)</span></span></a></li>
                </ul>
            </div>
            <footer class="page-edit">
                <div class="edit-link"><a
                        href="https://github.com/vuejs/vuepress/edit/master/packages/docs/docs/plugin/official/plugin-pwa.md"
                        target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg
                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                        viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor"
                                                                                                 d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span
                        class="sr-only">(opens new window)</span></span></div>
                <div class="last-updated"><span class="prefix">上次更新:</span> <span
                        class="time">2021/1/23 下午1:08:04</span></div>
            </footer>
            <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plugin/official/plugin-nprogress.html" class="prev">
        nprogress
      </a></span> <span class="next"><a href="/plugin/official/plugin-register-components.html">
        register-components
      </a>
      →
    </span></p></div>
        </main>
    </div>
    <div class="global-ui"><!----><!----></div>
</div>
<script src="/assets/js/app.28715422.js" defer></script>
<script src="/assets/js/5.cdfc0b9f.js" defer></script>
<script src="/assets/js/55.b2e1b9f2.js" defer></script>
<script src="/assets/js/9.4c44b987.js" defer></script>
</body>
</html>
